import './index.less'
import ListItem from "./components/ListItem";
import {PlusOutlined, SearchOutlined} from "@ant-design/icons";
import {Button, Input} from "antd";
import {useSelector} from "react-redux";

const ListColumn = () => {
    const state = useSelector(state => state)

    let userList = []

    if(state.userList) {
        userList = state.userList
    }

    return (
        <div className="list-container w-full h-full">
            <div className="list-header flex items-center">
                <div className="flex px-2 pt-3">
                    <div className="pr-2">
                        <Input className="list-search-input"
                               allowClear
                               size="small"
                               placeholder="搜索"
                               prefix={<SearchOutlined/>}/>
                    </div>
                    <div>
                        <Button className="list-add-btn" size="small" icon={<PlusOutlined/>}/>
                    </div>
                </div>
            </div>
            <div className="list-body">
                {userList.map((item, index) =>
                    item.id === state.userId ? '' :<ListItem key={index} username={item.name}></ListItem>
                )}
            </div>
        </div>
    )
}

export default ListColumn